<template>
  <div class="home">
    <Header head-title="注册电子健康卡" go-back="true"></Header>
    <h3 class="cardTitle">选择标签</h3>
    <section
      class="label Select borderR"
      v-for="(item, index) in labels"
      :key="index"
      @click="Label(index, item.value)"
      :class="[tag == index ? 'labelActive' : '']"
    >
      <img class="cardimg" v-if="tag == index" src="../../assets/img/right.png" alt />
      <p class="fontsMin cardname">{{ item.name }}</p>
    </section>
    <h3 class="cardTitle">填写申请人信息</h3>
    <section class="Select CardApply">
      <p class="fonts">姓名</p>
      <input type="text" v-model="name" class="Back_input" placeholder="请输入持卡人真实姓名" />
    </section>
    <section class="Select CardApply">
      <p class="fonts">身份证号</p>
      <input type="number" v-model="idNo" class="Back_input" placeholder="请输入持卡人身份证号" />
      <img class="idcardPng" src="../../assets/img/idcard.png" alt />
    </section>
    <section class="Select CardApply">
      <p class="fonts">性别</p>
      <section class="Back_input Back_input1">
        <el-radio v-model="radio" label="1">男</el-radio>
        <el-radio v-model="radio" label="2">女</el-radio>
      </section>
    </section>
    <section class="Select CardApply">
      <p class="fonts">民族</p>
      <el-select class="Back_input Back_input1" v-model="label" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </section>
    <section class="Select CardApply">
      <p class="fonts">详细地址</p>
      <input type="text" v-model="address" class="Back_input" placeholder="填写现居地详细地址" />
    </section>
    <section class="Select CardApply">
      <p class="fonts">手机号</p>
      <input type="tel" maxlength="11" v-model="phone" class="Back_input" placeholder="请输入手机号" />
      <button class="GetCode" :disabled="dis" @click="getCode">{{text}}</button>
    </section>
    <section class="Select CardApply">
      <p class="fonts">验证码</p>
      <input type="tel" maxlength="6" v-model="code" class="Back_input" placeholder="请输入验证码" />
    </section>
    <el-button type="primary" class="Login" @click="tell">确认提交</el-button>
  </div>
</template>

<script>
import Header from '../../components/Header'
import { Toast } from 'mint-ui'
import cardApi from '@/api/card'
import ssoApi from '@/api/sso'

export default {
  data () {
    return {
      activeName: 'first',
      activeIndex: '1',
      label: '',
      tag: 0,
      labels: [
        { name: '本人', value: '6' },
        { name: '父母', value: '1' },
        { name: '子女', value: '2' },
        { name: '配偶', value: '4' },
        { name: '其他', value: '7' }
      ],
      radio: '1',
      options: [
        { value: '1', label: '汉族' },
        { value: '2', label: '蒙古族' },
        { value: '3', label: '回族' },
        { value: '4', label: '藏族' },
        { value: '5', label: '维吾尔族' },
        { value: '6', label: '苗族' },
        { value: '7', label: '彝族' },
        { value: '8', label: '壮族' },
        { value: '9', label: '布依族' },
        { value: '10', label: '朝鲜族' },
        { value: '11', label: '满族' },
        { value: '12', label: '侗族' },
        { value: '13', label: '瑶族' },
        { value: '14', label: '白族' },
        { value: '15', label: '土家族' },
        { value: '16', label: '哈尼族' },
        { value: '17', label: '哈萨克族' },
        { value: '18', label: '傣族' },
        { value: '19', label: '黎族' },
        { value: '20', label: '傈僳族' },
        { value: '21', label: '佤族' },
        { value: '22', label: '畲族' },
        { value: '23', label: '高山族' },
        { value: '24', label: '拉祜族' },
        { value: '25', label: '水族' },
        { value: '26', label: '东乡族' },
        { value: '27', label: '纳西族' },
        { value: '28', label: '景颇族' },
        { value: '29', label: '柯尔克孜族' },
        { value: '30', label: '土族' },
        { value: '31', label: '达斡尔族' },
        { value: '32', label: '仫佬族' },
        { value: '33', label: '羌族' },
        { value: '34', label: '布朗族' },
        { value: '35', label: '撒拉族' },
        { value: '36', label: '毛难族' },
        { value: '37', label: '仡佬族' },
        { value: '38', label: '锡伯族' },
        { value: '39', label: '阿昌族' },
        { value: '40', label: '普米族' },
        { value: '41', label: '塔吉克族' },
        { value: '42', label: '怒族' },
        { value: '43', label: '乌孜别克族' },
        { value: '44', label: '俄罗斯族' },
        { value: '45', label: '鄂温克族' },
        { value: '46', label: '崩龙族' },
        { value: '47', label: '保安族' },
        { value: '48', label: '裕固族' },
        { value: '49', label: '京族' },
        { value: '50', label: '塔塔尔族' },
        { value: '51', label: '独龙族' },
        { value: '52', label: '鄂伦春族' },
        { value: '53', label: '赫哲族' },
        { value: '54', label: '门巴族' },
        { value: '55', label: '珞巴族' },
        { value: '56', label: '基诺族' }
      ],
      time: 60,
      text: '获取验证码',
      dis: false,
      code: '',
      birthday: '',
      phone: '',
      name: '',
      idNo: '',
      address: '',
      openId: ''
    }
  },
  components: {
    Header
  },
  created () {

  },
  methods: {
    tell () {
      console.log(encodeURIComponent('https://garbage-client.jinshw.cn/'))
      if (this.name === '') {
        Toast('请输入持卡人姓名')
        return
      }
      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idNo)) {
        Toast('请输入有效的身份证号')
        return
      }
      if (this.nation === '') {
        Toast('请选择民族')
        return
      }
      if (this.code.length !== 6) {
        Toast('请输入验证码')
        return
      }
      // 验证验证码是否正确
      ssoApi.validCode(this.phone, this.code).then(response => {
        console.log(response)
        if (response.code !== 200) {
          // 验证验证码失败
          Toast('请输入正确的验证码')
          return
        }

        const wechat = {
          idNo: this.idNo,
          name: this.name
        }

        // 验证验证码成功,调用人脸识别
        cardApi.getWechat(wechat).then(response => {
          debugger
          console.log(response)
          const orderId = response.data.orderId
          window.sessionStorage.setItem('orderId', orderId)

          const card = {
            birthday: birthday,
            gender: (parseInt(this.radio) - 1).toString(),
            idNo: this.idNo,
            name: this.name,
            nation: this.label,
            orderId: orderId,
            phone: this.phone
          }
          cardApi.bindCard(card).then(response => {
            window.location.href = 'https://health.tengmed.com/open/facePictureVerify?order_id=' + orderId +
              '&redirect_url=' + encodeURIComponent('https://garbage-client.jinshw.cn')
          })
        })
      })
    },

    handleClick (tab, event) {
      //   console.log(tab, event)
    },
    Label (index, value) {
      this.tag = index
    },
    getCode () {
      // 获取验证码
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        Toast('请输入正确的手机号')
        return
      }

      // 验证码时间控制60秒后重发
      let time = this.time
      const sel = setInterval(() => {
        time--
        // console.log(time)
        const text = time + '秒重新发送'
        this.time = time
        this.text = text
        this.dis = true
        if (time === 0) {
          clearInterval(sel)
          this.time = 60
          this.text = '获取验证码'
          this.dis = false
        }
      }, 1000)
      ssoApi.getCode(this.phone).then(response => {
        console.log(response)
      })
    }
  }

}
</script>

<style scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 0.4rem;
  background: #fff;
  padding-top: 1rem;
  overflow-y: auto;
}
</style>
